<template>
	<view class="page-box">
		<uni-popup ref="popup" type="center" :mask-click="shade">
			<view class="tool-tips">
				<view class="title">{{title}}</view>
				<block v-if="$slots.default">
					<view>
						<slot></slot>
					</view>
				</block>
				<block v-else>
					<view class="content" v-html="message"></view>
				</block>
				<view class="btn-box">
					<view class="btn-msg" @click="confirm()">
						{{confirmText}}
					</view>
					<view v-if="closeBtn" class="btn-msg" @click="hide()">
						{{closeText}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "tooltips-msg",
		props: {
			shade: {
				default: false,
				type: Boolean
			},
			closeBtn: {
				default: false,
				type: Boolean
			},
			confirmText: {
				default: function(){
					return this.$t('confirm')
				},
				type: String
			},
			closeText: {
				default: function(){
					return this.$t('cancel')
				},
				type: String
			},
		},
	    data() {
	        return {
				title: '温馨提示',
				message: "",
				fn: null,
				autoclose: true
			}
	    },
	    onReady() {},
	    methods: {
	        open(message, fn, title = '温馨提示', autoclose = true) {
				this.message = message
				this.fn = fn
				this.title = title
				this.autoclose = autoclose
	            this.$refs.popup.open()
	        },
	        confirm() {
	            // this.$refs.popup.confirm()
	            if(this.autoclose) this.$refs.popup.close()
				if (this.fn){
					setTimeout(() => {
						this.fn(true)
					})
				}
	        },
			close(){
				this.$refs.popup.close()
			},
			hide(){
				if(this.autoclose) this.$refs.popup.close()
				if (this.fn){
					setTimeout(() => {
						this.fn(false)
					})
				}
			}
	    }
	}
</script>

<style lang="scss" scoped>
	.page-box {
		color: #333333;
		font-family: PingFang SC;
	}
	.tool-tips {
		width: 540rpx;
		// min-height: 800rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		background: #FFFFFF;
		border-radius: 20rpx;
		& > .title {
			font-size: 28rpx;
			font-weight: 600;
			margin: 48rpx 0px 52rpx;
			width: 100%;
			text-align: center;
		}
		& > .content {
			max-height: 410rpx;
			overflow: scroll;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 44rpx;
			width: 415rpx;
			overflow: hidden;
			color: #333333;
			margin: 0 60rpx;
			flex-shrink: 0;
			&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
			
			        border-radius:5px;
			
			        -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
			
			        background:rgba(0,0,0,0.2);  /*设置滚动条颜色*/
			
			}
		}
		.btn-box{
			width: 100%;
			display: flex;
			justify-content: space-around;
		}
		.btn-msg {
			width: 300rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(90deg, #0877C6, #1A86D2);
			border-radius: 20rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin: 48rpx 30rpx;
		}
	}
</style>
